<template>
  <div class="search-suggestion">
    <van-cell icon="search"
      v-for="(text,index) in suggestions"
      :key="index"
      @click="confirmSearchText(text)">
      <!-- 在van-cell内部设置插槽 代替 :title="item" -->
      <div slot="title"
        v-html="highLight(text)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggest } from '@/api/search'
import { debounce } from 'lodash'
export default {
  name: 'SearchSuggestion',
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      suggestions: []
      // timer: null
    }
  },

  watch: {
    searchText: {
      // handler (val) {
      //   console.log(val)
      //   this.initGetSearchSuggest(val)
      // },
      handler: debounce(function (val) {
        this.initGetSearchSuggest(val)
      }, 600),
      immediate: true
    }
  },

  methods: {
    // 封装 发起搜索联想建议的请求
    async initGetSearchSuggest (q) {
      // if (this.timer) clearTimeout(this.timer)

      // this.timer = setTimeout(async () => {
      //   }, 600)
      try {
        const { data: { data: { options } } } = await getSearchSuggest(q)
        console.log(options)
        this.suggestions = options
      } catch (error) {
        this.$toast('获取数据失败', error)
      }
    },
    // * 处理高亮文本
    //  * 思路：
    //  * 1. 想要在一个字符串中，将固定的字符特殊显示（改变颜色）
    //  * 2. 那么就需要在这个字符串中，找出该字符，然后为该字符设置单独的样式（span.active）
    //  * 拆解：
    //  *     1. 找出字符
    //  *     2. 替换字符
    //  *     3. 设置单独的样式比较容易（替换字符），难点在于找出字符
    //  * 如何找出字符：
    //  * 1. 那么《处理高亮文本》的问题，就变成，《如何在字符串中找出固定的字符》
    //  * 2. 在字符串中找出固定字符，大家首先想到的就应该是使用 -》 正则表达式
    //  * 3. 简单使用正则（text.replace(/匹配的内容/gi, highlightStr)） , 无法插入响应式数据
    //  * 4. 所以我们使用了 RegExp 对象。RegExp 构造函数创建了一个正则表达式对象，用于将文本与一个模式匹配。MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp
    //  * 5. 通过 RegExp 来完成响应式数据的正则匹配
    highLight (text) { // text接收的是从服务器请求回来的遍历后的数据
      if (!text) return
      // 高亮显示的目的是 要让服务器返回的数据中 含有搜索框内容部分的数据 高亮显示
      // reg是匹配到的字符串  highLightStr 是带有高亮显示的字符串
      // 正则表达式 // 中间的内容都会当作匹配字符来使用，而不是数据变量
      // 如果需要根据数据变量动态的创建正则表达式，则手动 new RegExp
      // RegExp 正则表达式构造函数
      //    参数1：匹配模式字符串，它会根据这个字符串创建正则对象
      //    参数2：匹配模式，要写到字符串中 g 全局匹配 i 忽略大小写
      const highLightStr = `<span class="active">${this.searchText}</span>`
      const reg = new RegExp(this.searchText, 'gi')
      return text.replace(reg, highLightStr) // replace方法不会改变原字符串 而是返回一个新字符串
    },
    confirmSearchText (text) {
      this.$emit('faSearch', text)
    }
  }
}
</script>

<style scoped lang="less">
.search-suggestion {
  /deep/ span.active {
    color: #3296fa;
  }
}
</style>
